<template>
  <div class="page-container">
    <!-- 侧边栏等其他页面元素可在这里添加 -->
    <div class="beijin">
      <el-card class="risk-warning-card" shadow="hover">
        <!-- 风险等级展示 -->
        <div class="risk-level">
          <div 
            class="level-icon" 
            :class="`level-${riskLevel === '高风险' ? 'high' : riskLevel === '中风险' ? 'medium' : 'low'}`"
          ></div>
          <h2 
            class="level-text" 
            :class="`level-${riskLevel === '高风险' ? 'high' : riskLevel === '中风险' ? 'medium' : 'low'}`"
          >
            {{ riskLevel }}
          </h2>
        </div>

        <!-- 风险触发原因 -->
        <div class="risk-reason" v-if="triggerReasons.length > 0">
          <h3>触发原因</h3>
          <p v-for="(item, index) in triggerReasons" :key="index">
            {{ index + 1 }}. {{ item.date }}：{{ item.emotion }} + 睡眠{{ item.sleep }} → {{ item.tip }}
          </p>
        </div>
        <div class="risk-reason" v-else>
          <h3>触发原因</h3>
          <p>暂无风险触发记录</p>
        </div>

        <!-- 调节建议（不同风险等级显示不同内容） -->
        <div class="adjust-suggestion">
          <h3>调节建议</h3>
          <p v-if="riskLevel === '高风险'">
            ① 立即与心理老师预约咨询（系统已为你推送预约入口）<br>
            ② 未来3天每天保证8小时睡眠，避免独处，多参与集体活动
          </p>
          <p v-else-if="riskLevel === '中风险'">
            ① 今晚提前1小时睡觉，尝试听轻音乐助眠<br>
            ② 明天课间找同学聊3件开心的事，记录情绪日记
          </p>
          <p v-else>
            ① 保持当前状态，继续规律作息<br>
            ② 每周可抽1天进行户外活动（如散步、打球）
          </p>
        </div>

        <!-- 历史采集记录表格 -->
        <div class="history-record">
          <h3>近7日采集记录</h3>
          <el-table :data="historyData" style="margin-top: 16px;" v-if="historyData.length > 0">
            <el-table-column prop="date" label="日期" width="120"></el-table-column>
            <el-table-column prop="emotion" label="情绪" width="80"></el-table-column>
            <el-table-column prop="sleep" label="睡眠时长" width="100"></el-table-column>
            <el-table-column prop="risk" label="风险状态" width="100"></el-table-column>
          </el-table>
          <p v-else class="text-gray-500">暂无采集记录，请先在“数据采集页”填写数据</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collectHistory: [] // 存储从本地读取的采集历史
    }
  },
  mounted() {
    // 页面挂载时，从 LocalStorage 读取采集历史
    const history = JSON.parse(localStorage.getItem('collectHistory')) || [];
    this.collectHistory = history;
  },
  computed: {
    // 1. 计算风险等级（核心规则：连续3天焦虑+睡眠＜6→高风险；存在1天→中风险；否则低风险）
    riskLevel() {
      if (this.collectHistory.length === 0) return '低风险';
      
      // 取最近3天的「每日采集」数据
      const recent3Days = this.collectHistory.slice(-3).map(item => item.daily);
      
      // 检查是否「连续3天 焦虑 + 睡眠＜6小时」
      const hasContinuousHighRisk = recent3Days.every(item => 
        item.emotion === '2' && // emotion为2 → 焦虑（对应数据采集页的radio值）
        item.sleepTime === 'less6' // sleepTime为less6 → 睡眠＜6小时
      );
      
      if (hasContinuousHighRisk) {
        return '高风险';
      } else {
        // 检查是否「至少1天 焦虑 + 睡眠＜6小时」
        const hasMediumRisk = recent3Days.some(item => 
          item.emotion === '2' && 
          item.sleepTime === 'less6'
        );
        return hasMediumRisk ? '中风险' : '低风险';
      }
    },

    // 2. 生成风险触发原因列表
    triggerReasons() {
      const reasons = [];
      this.collectHistory.forEach(item => {
        if (item.daily.emotion === '2' && item.daily.sleepTime === 'less6') {
          reasons.push({
            date: item.date,
            emotion: '焦虑',
            sleep: '＜6小时',
            tip: '触发中风险'
          });
        }
      });
      // 若有3条及以上记录，最后一条标记为“升级高风险”
      if (reasons.length >= 3) {
        reasons[reasons.length - 1].tip = '连续3天中风险→升级高风险';
      }
      return reasons;
    },

    // 3. 生成历史记录表格数据（含风险状态）
    historyData() {
      return this.collectHistory.map(item => {
        // 情绪文字映射（1→平静，2→焦虑，3→开心，4→低落）
        const emotionText = item.daily.emotion === '1' ? '平静' : 
                           item.daily.emotion === '2' ? '焦虑' : 
                           item.daily.emotion === '3' ? '开心' : '低落';
        // 睡眠时长文字映射（less6→＜6小时，6to8→6-8小时，more8→＞8小时）
        const sleepText = item.daily.sleepTime === 'less6' ? '＜6小时' : 
                         item.daily.sleepTime === '6to8' ? '6-8小时' : '＞8小时';
        
        // 计算该行的风险状态
        const isRisky = item.daily.emotion === '2' && item.daily.sleepTime === 'less6';
        const isHighRisk = this.collectHistory.slice(
          Math.max(0, this.collectHistory.indexOf(item) - 2), 
          this.collectHistory.indexOf(item) + 1
        ).every(i => i.daily.emotion === '2' && i.daily.sleepTime === 'less6');
        const riskText = isHighRisk ? '高风险' : (isRisky ? '中风险' : '低风险');
        
        return {
          date: item.date,
          emotion: emotionText,
          sleep: sleepText,
          risk: riskText
        };
      });
    }
  }
}
</script>

<style scoped>
.page-container {
  position: relative;
  min-height: 100vh;
}

.beijin {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 50px 20px;
}

.beijin::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: calc(100% - 100px);
  background: url("~@/assets/image11.png") no-repeat center center;
  background-size: cover;
  opacity: 0.5;
  z-index: -1;
}
.el-table {
  border: none !important;
}
.el-table__header-wrapper, .el-table__body-wrapper {
  border: none !important;
}
.el-table th, .el-table td {
  border: none !important;
}
.risk-warning-card {
  width: 800px;
  background-color: rgba(255, 255, 255, 0.12); 
  backdrop-filter: blur(4px);
  border: 1px solid rgba(244, 241, 241, 0.3); 
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}
.risk-level {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}
.level-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* 风险等级样式（高→红，中→橙，低→绿） */
.level-icon.level-high {
  background-color: #ff4949;
}
.level-icon.level-medium {
  background-color: #ffb02b;
}
.level-icon.level-low {
  background-color: #67c23a;
}
.level-text {
  font-size: 28px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.level-text.level-high {
  color: #ff4949;
}
.level-text.level-medium {
  color: #ffb02b;
}
.level-text.level-low {
  color: #67c23a;
}
.risk-reason,
.adjust-suggestion {
  margin-bottom: 32px;
}
.risk-reason h3,
.adjust-suggestion h3,
.history-record h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 16px;
  border-left: none;
  padding-left: 8px;
}
.reason-item {
  line-height: 1.8;
  margin-bottom: 8px;
  color: #444;
}
.suggestion-content {
  line-height: 1.8;
  color: #444;
  white-space: pre-line;
}
.history-record {
  margin-bottom: 24px;
}
.history-table {
  font-size: 14px;
}
.text-gray-500 {
  color: #999;
  text-align: center;
  padding: 24px 0;
}
</style>